﻿@{
    ViewBag.Title = "NuevaConvocatoria";
    Layout = "~/Views/Shared/_Layout.cshtml";
  
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var fing = new google.maps.LatLng(-34.919022724095015, -56.16678233238224);
    var marker;
    var map;
    var geocoder;

    window.onload = function (e) {
        var mapOptions = {
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: fing,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            }
        };
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById("map_canvas"),
				mapOptions);

        marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: fing
        });

        document.getElementById("punto1").value = fing.lat();
        document.getElementById("punto2").value = fing.lng();

        google.maps.event.addListener(map, 'click', function (event) {
            var newLatLng = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
            marker.setPosition(newLatLng);
            map.panTo(newLatLng);
            document.getElementById("punto1").value = event.latLng.lat();
            document.getElementById("punto2").value = event.latLng.lng();
        });

        google.maps.event.addListener(marker, 'mouseup', function (event) {
            document.getElementById("punto1").value = event.latLng.lat();
            document.getElementById("punto2").value = event.latLng.lng();
            map.panTo(event.latLng);
        });
        google.maps.event.addListener(marker, 'click', toggleBounce);
    }

    function codeAddress() {
        var address = document.getElementById("address").value;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var newLatLng = results[0].geometry.location;
                marker.setPosition(newLatLng);
                document.getElementById("punto1").value = newLatLng.lat();
                document.getElementById("punto2").value = newLatLng.lng();
            } else {
                alert("No se ha encontrado la dirección");
            }
        });
    }
</script>
<link rel="stylesheet" type="text/css" href= "@Url.Content("~/Content/ConvocatoriaForm.Mobile.css")"/>

<h1>Crear Convocatoria</h1>
<div id = "conymapa">
    <div id="newconv">
        @using (Html.BeginForm("NuevaConvocatoria", "Convocatoria", FormMethod.Post, new { enctype = "multipart/form-data", id = "convocatoria", style = "left: 21%;top: 58%;" }))
        { 
            <div id= "contenedordeConvocatoria">
            <fieldset id="inputs">
                <label for="convocatoria-titulo">Título de la convocatoria:</label>
                <br />
                <input type="text" name="ConvocatoriaTitulo" size=30 placeholder="Nombre de la convocatoria"/>
                <br />

                <label for="fecha-inicio">Fecha de inicio:</label>
                <br />
                <input type="text" name="ConvocatoriaFechaInicio"/>
                <br />

                <label for="fecha-fin">Fecha de finalización:</label>
                <br />
                <input type="date" name="ConvocatoriaFechaFin"/>
                <br />

                <label for="detalle">Detalles:</label>
                <br />
                <input type="text" name="ConvocatoriaDetalle" placeholder="Describa la convocatoria"/>
                <br />

                <label for="constante-quorum">Quórum:</label>
                <br />
                <input type="number" name="ConvocatoriaQuorum" value="0"/>
                <br />

                <input id="punto1" type="hidden" name="ConvocatoriaUbicacionX" value="0" />
		        <input id="punto2" type="hidden" name="ConvocatoriaUbicacionY" value="0"/>
        
                <label for="convocatoria-logo" style="visibility: hidden">Logo:</label>
                <input name="ConvocatoriaLogo" style="width: 0px; height: 0px" type="file" />
                        
            @{
                var MyList = new List<SelectListItem>();
                foreach (var cat in ViewBag.CategoriasTematicas){

                    var categoria = new SelectListItem() { Value = cat.Id.ToString(), Text = cat.CategoriaTematicaNombre };
                    MyList.Add(categoria);

                }
            }
            <div>
                CategoriaTematica:
                <br />
                @Html.DropDownList("CategoriaTematicaId", MyList, new { id = "dropdownlist" })    
            </div>
            </fieldset>
            <div id="contenedorMapa">
		        <div id="busquedamapa">
			        Dirección: <input id="address" type="text" value="">
			        <input type="button" value="Buscar" onclick="codeAddress()">
		        </div>
		        <div id="map_canvas">map div</div>
	        </div>
            <br />
		    <input id = "submit" type="submit" value="Crear"/>
            <br />
            </div>
        }
    </div>
</div>
